<template>
  <el-dialog :title="modalOption.title" :visible.sync="modalOption.visible" :width="modalOption.width" :fullscreen="modalOption.fullscreen" :top="modalOption.top" :modal="modalOption.modal" :modal-append-to-body="modalOption.modalAppendToBody" :append-to-body="modalOption.appendToBody" :lock-scroll="modalOption.lockScroll" :custom-class="modalOption.customClass" :close-on-click-modal="modalOption.closeOnClickModal" :close-on-press-escape="modalOption.closeOnPressEscape" :show-close="modalOption.showClose" :before-close="modalOption.beforeClose" :center="modalOption.Center" :destroy-on-close="modalOption.destroyOnClose">
    <div class="md-content" :style="{maxHeight: modalOption.height}">
      <div v-if="modalOption.content">{{ modalOption.content }}</div>
      <component v-if="modalOption.componentName" :is="modalOption.componentName" :params="modalOption.params" @close="handleClose" @callback="onCallbackHandller"></component>
    </div>
    <template slot="footer" class="dialog-footer">
      <md-button v-if="modalOption.showOkText" plr="35px" @click.native="okHandller">
        {{ modalOption.okText }}
      </md-button>
      <md-button plain v-if="modalOption.showCancelText" plr="35px" @click.native="cancelHandller">
        {{ modalOption.cancelText }}
      </md-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'MdModalBaseComponent',
  data() {
    return {
      modalOption: {
        /**
         * 是否显示 Dialog，支持 .sync 修饰符
         */
        visible: false,
        /**
         * Dialog 的标题，也可通过具名 slot （见下表）传入
         */
        title: '标题',
        /**
         * Dialog 的宽度
         */
        width: '520px',
        height: 'auto',
        /**
         * 是否为全屏 Dialog
         */
        fullscreen: false,
        /**
         * Dialog CSS 中的 margin-top 值
         */
        top: '10%',
        /**
         * 是否需要遮罩层
         */
        modal: true,
        /**
         * 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上
         */
        modalAppendToBody: true,
        /**
         * Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
         */
        appendToBody: false,
        /**
         * 是否在 Dialog 出现时将 body 滚动锁定
         */
        lockScroll: true,
        /**
         * Dialog 的自定义类名
         */
        customClass: 'md-modal-wrapper',
        /**
         * 是否可以通过点击 modal 关闭 Dialog
         */
        closeOnClickModal: false,
        /**
         * 是否可以通过按下 ESC 关闭 Dialog
         */
        closeOnPressEscape: false,
        /**
         * 是否显示关闭按钮
         */
        showClose: true,
        /**
         * 关闭前的回调，会暂停 Dialog 的关闭
         */
        beforeClose: null,
        /**
         * 是否对头部和底部采用居中布局
         */
        center: false,
        /**
         * 关闭时销毁 Dialog 中的元素
         */
        destroyOnClose: false,
        /**
         * 是否显示取消按钮
         */
        showCancelText: true,
        /**
         * 取消按钮文字
         */
        cancelText: '取消',
        /**
         * 是否显示确定按钮
         */
        showOkText: true,
        /**
         * 确定按钮文字
         */
        okText: '确定',
        /**
         * 内容
         * String
         */
        content: '',
        /**
         * 组件名称
         * Object
         */
        componentName: null,
        /**
         * 组件内返回值
         */
        componentOutput: null,
        /**
         * 组件参数
         * Object
         */
        params: {},
        /**
         * 点击遮罩层或右上角叉或取消按钮的回调
         */
        cancelHandller: (options, close) => {
          console.log(options, close)
        },
        /**
         * 点击确定回调
         */
        okHandller: (options, close) => {
          console.log(options, close)
        },
        /**
         * 事件总回调，用来接收组件内事件
         */
        eventHandller: (options, close, event) => {
          console.log(options, close, event)
        }
      }
    }
  },
  methods: {
    /**
     * 关闭回调
     */
    closeHandller() {
      this.modalOption.visible = false
    },
    /**
     * 点击遮罩层或右上角叉或取消按钮的回调
     */
    cancelHandller() {
      this.closeHandller()
      this.modalOption.cancelHandller(this.modalOption, this.closeHandller)
    },
    /**
     * 点击确定回调
     */
    okHandller() {
      this.modalOption.okHandller(this.modalOption, this.closeHandller)
    },
    /**
     * 组件总回调
     */
    onCallbackHandller(event) {
      this.modalOption.componentOutput = event
    },
    handleClose() {
      this.okHandller()
    },
    handleBeforeClose(close) {
      console.log(this.modalOption)
      close()
    }
  }
}
</script>

<style lang="less">
.md-modal-wrapper {
  border-radius: 6px !important;
  .el-dialog__wrapper {
    z-index: 3000 !important;
  }
  .el-dialog__header {
    border-bottom: 1px solid rgb(245, 245, 245);
    .el-dialog__headerbtn {
      border-radius: 50px;
      background-color: rgba(0, 0, 0, 0.5);
      width: 30px;
      height: 30px;
      position: absolute;
      right: -14px;
      top: -12px;

      i {
        color: #fff;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
  .el-dialog__body {
    padding: 10px 20px;
    overflow-x: hidden;
    .md-content {
      width: 100%;
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: auto;
      .scroll-bar(5px,5px);
      padding-right: 10px;
    }
  }
  .el-dialog__footer {
    border: none;
    text-align: center;
  }
}
</style>
